$(function(){
    getHt();
    makerMap();
    addMarker();
})
//获取div的高度
function getHt(){
    var all_height=$(window).height();
    var div_height=all_height-84;
    $("#car_control").css("height",div_height+"px");
}

function makerMap() {
    map = new AMap.Map('map', {
        rotateEnable: true,
        pitchEnable: true,
        zoom: 13,
        pitch: 40,
        rotation: -15,
        viewMode: '3D', //开启3D视图,默认为关闭
        zooms: [2, 45],
        center: [120.16, 30.25],
        mapStyle: 'amap://styles/a64d0039ca8709242184d4d490f3bfe4'
    });
}

function addMarker() {
    var new_icon = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(50, 50),
        // 图标的取图地址
        image: 'img/加氢站.png',
        // 图标所用图片大小
        imageSize: new AMap.Size(50, 50),
        // 图标取图偏移量
        imageOffset: new AMap.Pixel(0, 0)
    });

    map.clearMap();
    var marker = new AMap.Marker({
        icon: new_icon,
        map: map,
        position: [120.154607,30.326623]
    });
    //鼠标点击marker弹出自定义的信息窗体
    marker.on('click', function () {
        infoWindow.open(map, marker.getPosition());
    });

    var maker_1 = new AMap.Marker({
        icon: new_icon,
        map: map,
        position: [120.232778,30.230133]
    });

    maker_1.on('click', function () {
        infoWindow.open(map, maker_1.getPosition());
    });
}

//实例化信息窗体
var title = '浙大城市学院-70Mpa加氢站<span style="font-size:11px;color:#F00;">正在运行</span>',
    content = [];
content.push("<img src='img/img.jpg'>今日加注车次： 15 辆");
content.push("今日单价：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;35.00 元/公斤")
content.push("今日加氢总量： 50 公斤")
content.push("地址 :杭州市拱墅区湖州街51号")
content.push("<a href='../visualscreen/static.html'>详细信息</a>");



var infoWindow = new AMap.InfoWindow({
    isCustom: true,  //使用自定义窗体
    content: createInfoWindow(title, content.join("<br/>")),
    offset: new AMap.Pixel(35, -25)
});

//构建自定义信息窗体
function createInfoWindow(title, content) {
    var info = document.createElement("div");
    info.className = "custom-info input-card content-window-card";

    //可以通过下面的方式修改自定义窗体的宽高
    info.style.width = "400px";
    // 定义顶部标题
    var top = document.createElement("div");
    var titleD = document.createElement("div");
    var closeX = document.createElement("img");
    top.className = "info-top";
    titleD.innerHTML = title;
    closeX.src = "https://webapi.amap.com/images/close2.gif";
    closeX.onclick = closeInfoWindow;

    top.appendChild(titleD);
    top.appendChild(closeX);
    info.appendChild(top);

    // 定义中部内容
    var middle = document.createElement("div");
    middle.className = "info-middle";
    middle.style.backgroundColor = 'white';
    middle.innerHTML = content;
    info.appendChild(middle);

    // 定义底部内容
    var bottom = document.createElement("div");
    bottom.className = "info-bottom";
    bottom.style.position = 'relative';
    bottom.style.top = '0px';
    bottom.style.margin = '0 auto';
    var sharp = document.createElement("img");
    sharp.src = "https://webapi.amap.com/images/sharp.png";
    bottom.appendChild(sharp);
    info.appendChild(bottom);
    return info;
}

//关闭信息窗体
function closeInfoWindow() {
    map.clearInfoWindow();
}